<template>

<template v-for="(item, index) in menuData" :key="index">
    <el-menu-item
     v-if="!item.children || item.children.length === 0"
     :index="item.path"
     @click="handleClick(item)"
     >
         <el-icon>
            <component :is="item.meta?.icon || 'Menu'"></component>
         </el-icon>
         <span>{{ item.meta?.name || item.name }}</span>
    </el-menu-item>
    <el-sub-menu v-else :index="item.path">
        <template #title>
        <el-icon>
            <component :is="item.meta?.icon || 'Menu'"></component>
        </el-icon>
        <span>{{ item.meta?.name || item.name }}</span>
        </template>
        <tree-menu :menu-data="item.children" :parent-path="item.path"></tree-menu>
    </el-sub-menu>
</template>
      
     
</template> 
<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  menuData: {
    type: Array,
    default: () => []
  },
  parentPath: {
    type: String,
    default: ''
  }
})

const router = useRouter()

const handleClick = (item) => {
  if (item.path) {
    // 构建完整的路由路径
    const fullPath = props.parentPath ? `${props.parentPath}/${item.path}` : item.path
    router.push(fullPath)
  }
}
</script>

<style scoped>
.el-menu-item,
.el-sub-menu {
  width: 100%;
}

:deep(.el-sub-menu__title) {
  display: flex;
  align-items: center;
}

:deep(.el-sub-menu__title span) {
  margin-left: 5px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  .el-icon {
    font-size: 18px;
    margin-right: 5px;
  }
}
</style>